<template>
  <div>
    <div class="find-div">
      <el-input v-model="courseName" placeholder="通过课程名查询"></el-input>
      <el-button type="primary" @click="findCourseByCourseName">查询</el-button>
    </div>
    <div class="course-table">
      <el-table :data="tableData" border="true">
        <el-table-column prop="id" label="课程ID" width="50">
        </el-table-column>
        <el-table-column prop="courseNumber" label="课程号" width="150">
        </el-table-column>
        <el-table-column prop="courseName" label="课程名" width="100">
        </el-table-column>
        <el-table-column prop="college" label="学院" width="100">
        </el-table-column>
        <el-table-column prop="major" label="专业" width="100">
        </el-table-column>
        <el-table-column prop="grade" label="年级" width="50">
        </el-table-column>
        <el-table-column prop="credit" label="学分" width="50">
        </el-table-column>
        <el-table-column prop="classification" label="课程类别" width="110">
        </el-table-column>
        <el-table-column prop="teacher" label="教师名" width="100">
        </el-table-column>
        <el-table-column prop="location" label="上课地点" width="100">
        </el-table-column>
        <el-table-column prop="time" label="上课时间" width="60">
        </el-table-column>
        <el-table-column prop="period" label="上课周期" width="60">
        </el-table-column>
        <el-table-column label="编辑">
          <template slot-scope="scope">
            <el-button @click="updateCourse(scope.row)" type="primary">编辑</el-button>
            <el-button @click="deleteCourse(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      courseName: '',
      tableData: [],
    }
  },
  methods: {
    findCourseByCourseName() {
      if (this.courseName == "") {
        this.$message.error("请输入课程名")
        return
      }
      this.$axios
        .get("http://localhost:8000/course/findCourseByName", {
          params: {
            courseName: this.courseName
          },
          headers: {
            AUTHORIZATION: sessionStorage.getItem('access-admin')
          }
        })
        .then((res) => {
          this.tableData = res.data
        })
        .catch((err) => {
          console.error(err);
        });
    },
    updateCourse(course) {
      console.log(course)
      this.$router.push({ name: "adminCourseDetial", params: course })

    },
    deleteCourse(course) {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: "delete",
          url: "http://localhost:8000/course/deleteCourse",
          params: {
            id: course.id
          },
          headers: {
            AUTHORIZATION: sessionStorage.getItem('access-admin')
          }
        }).then((res) => {
          console.log(res);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$router.go(0)
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }

  }
}
</script>

<style scoped lang="scss">
.find-div {
  .el-input {
    width: 50%;

    .el-button {}
  }

  .course-table {
    .el-table{
      width: 100%;
    }
  }


}
</style>